import React from "react";
import {
  Input,
  Spin,
  Space,
  Breadcrumb,
  Table,
  message,
  Popconfirm,
  Tag,
} from "antd";
import {
  EyeFilled,
  DeleteFilled,
  
} from "@ant-design/icons";
import { Link } from "react-router-dom";
import {
  _delPaper,
  _paperList,
} from "../../util/api/paper/index";
import '../news/news.css'

const { Search } = Input;


class NewsList extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    isLoading: false,
    a_visible: false,
    userNameList: [],
    gradeList: [],
    confirmLoading: false,
    typeName: "",
    myPaperList: null,
    is_upload: false,
    //
    paperData: {},
  };
  getData = () => {
    this.setState({ isLoading: true });

    _paperList()
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          const myPaperList = res.data.data;
          for (let i = 0; i < myPaperList.length; i++) {
            myPaperList[i].key = myPaperList[i].paper_id;
            myPaperList[i].control = myPaperList[i].paper_id;
          }
          this.setState({ myPaperList: myPaperList });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  componentDidMount = () => {
    this.getData();
  };

  deletSource = (val) => {
    _delPaper(val)
      .then((res) => {
        console.log(res.data);
        if (res.status === 200 && res.data.code === 0) {
          if (res.data.data && res.data.data.code === -1) {
            message.warning(res.data.data.msg);
          } else {
            message.success("删除成功");
            this.getData();
          }
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };


  handleCancel = () => {
    this.setState({
      e_visible: false,
      a_visible: false,
    });
  };
  onInputChange = (e) => {
    this.setState({ typeName: e.target.value });
  };

  handleChange(value) {
    console.log(`selected ${value}`);
  }
 
  render() {
    const columns = [
      {
        title: "名称",
        dataIndex: "paper_title",
      },
      {
        title: "作者",
        dataIndex: "paper_name",
      },
      {
        title: "会议/期刊",
        dataIndex: "grade_name",
        render: (text, record) => <Tag color="blue">{text}</Tag>,
      },
      {
        title: "操作",
        dataIndex: "control",
        render: (text, record) => (
          <Space size="middle">
            {/* <a href={`/view_p?url=${record.paper_url}`} target="_blank" rel="noopener noreferrer">
                <EyeFilled />
              </a> */}
            <a
              href={`/file/paper/${record.paper_url}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              <EyeFilled />
            </a>
            <Popconfirm
              title="确认要删除吗？"
              okText="是"
              cancelText="否"
              onConfirm={this.deletSource.bind(this, text)}
            >
              <DeleteFilled style={{ color: "#7f8c8d" }} />
            </Popconfirm>
          </Space>
        ),
      },
    ];

 
    return (
      <div>
        <div className="newslist-header">
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>
              <Link to="/m/index">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>论文列表</Breadcrumb.Item>
          </Breadcrumb>

          <div>
            <Search
              placeholder="input search text"
              onSearch={(value) => console.log(value)}
              style={{ width: 200 }}
            />
          </div>
        </div>

        <div className="admin-body" style={{ padding: 15, minHeight: 360 }}>
          <Spin tip="Loading..." spinning={this.state.isLoading}>
            <Table
              columns={columns}
              dataSource={this.state.myPaperList}
              pagination={{ pageSize: 6 }}
            />
          </Spin>
        </div>
      </div>
    );
  }
}

export default NewsList;
